/*
 * @Descripttion:
 * @Author: cuidm
 * @Date: 2022-05-25 16:20:13
 * @LastEditors: cuidm
 * @LastEditTime: 2022-10-08 13:32:11
 */
import React, { useState, useEffect } from "react";
import { CmdbContent, CmdbHeader, NameSpaceBtn } from "@/components";
import { Row, Col, Card, Input, Layout, Space, Button, Spin, Empty } from "antd";
import cmdbres from "@/data/cmdbres";
import request from "@/utils/request";
import ResourceItem from "./resourceItem";
import "./index.less";

const ResourceIndex = ({ history }) => {
    const [loading, setLoading] = useState(true);
    const [resourceList, setResourceList] = useState([]);
    const [allData, setAllData] = useState([]);
    const [searchValue, setSearchValue] = useState('');

    useEffect(() => {
        queryResourceCatalog();
    }, []);

    const queryResourceCatalog = async () => {
        try {
            setLoading(true);
            let res = await request({
                ...cmdbres.queryModelList,
                params: {
                    namespace: "default"
                },
            });
            setLoading(false);
            if (res && res.code == "200") {
                setAllData(res.data);
                setResourceList(res.data);
            } else {
                setAllData([]);
                setResourceList([]);
            }
        } catch (error) {
            setResourceList({});
            console.log(error);
        }
    }

    const findResource = (data) => {
        let newArr = [];
        data?.map(item => {
            item.title = item.cmModuleId ? item.moduleName : item.moduleClassificationName;
            if (item.title.indexOf(searchValue) > -1) { // 判断条件
                newArr.push(item);
            } else {
                const propertyName = item.children ? "children" : "definitions";
                if (item[propertyName] && item[propertyName].length > 0) {
                    let resData = findResource(item[propertyName]);
                    if (resData && resData.length > 0) {
                        let obj = {
                            ...item,
                            [propertyName]: resData
                        };
                        newArr.push(obj);
                    }
                }
            }
        });
        return newArr;
    };

    const onSearch = () => {
        if(!searchValue) {
            setResourceList(allData);
            return;
        }
        const res = findResource(allData);
        setResourceList(res);
    }

    return (
    <CmdbContent>
        <CmdbHeader title="资源目录" />
        <section className="hcp__page">
            <section className="hcp__page__container">
                <div className="resource-pane back-white padding-10" >
                    <div className="back-white m-b-10 padding-10">
                        模糊搜索：
                        <Input
                            placeholder="请输入关键字搜索"
                            value={searchValue}
                            onChange={(e) => {
                                setSearchValue(e.target.value);
                            }}
                            style={{ width: "210px" }}
                            allowClear
                        />
                        <Space style={{marginLeft: 10}}>
                            <Button type="primary" onClick={onSearch}>查询</Button>
                            <Button onClick={() => {setSearchValue();}}>重置</Button>
                        </Space>
                    </div>
                    {
                        loading ? <Spin tip="加载中..." style={{width: '100%'}} />:
                        <div style={{border: '1px solid #D9D9D9'}}>
                            {resourceList && resourceList.length > 0 ? resourceList.map((item,index) => {
                                if(["biz_group", "biz_topology_group"].includes(item.moduleClassificationCode)) {//隐藏业务拓补分组
                                    return null;
                                }
                                return (
                                    <ResourceItem history={history} info={item} key={index}/>
                                )
                            }):
                            <Empty
                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                                description={allData?.length != resourceList?.length ? "无查询结果，请重新输入查询关键词" : ""}
                            />}
                        </div>
                    }
                </div>
            </section>
        </section>
    </CmdbContent>
    );
};

export default ResourceIndex;
